<template>
  <div class="space-y-8">
    <div class="space-y-4">
      <h3 class="text-lg font-semibold">高度自定义化示例</h3>

      <!-- 样式预设示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">样式预设</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <h5 class="text-sm font-medium mb-2">现代风格</h5>
            <CommentItem
              :comment="comment"
              :style-config="{ preset: 'modern' }"
              card-style="elevated"
              spacing="normal"
            />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">经典风格</h5>
            <CommentItem
              :comment="comment"
              :style-config="{ preset: 'classic' }"
              card-style="outlined"
              spacing="normal"
            />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">极简风格</h5>
            <CommentItem
              :comment="comment"
              :style-config="{ preset: 'minimal' }"
              card-style="minimal"
              spacing="tight"
            />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">彩色风格</h5>
            <CommentItem
              :comment="comment"
              :style-config="{ preset: 'colorful' }"
              card-style="neon"
              spacing="loose"
            />
          </div>
        </div>
      </div>

      <!-- 布局示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">布局样式</h4>
        <div class="space-y-4">
          <div>
            <h5 class="text-sm font-medium mb-2">默认布局</h5>
            <CommentItem :comment="comment" layout="default" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">紧凑布局</h5>
            <CommentItem :comment="comment" layout="compact" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">极简布局</h5>
            <CommentItem :comment="comment" layout="minimal" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">卡片布局</h5>
            <CommentItem :comment="comment" layout="card" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">时间线布局</h5>
            <CommentItem :comment="comment" layout="timeline" />
          </div>
        </div>
      </div>

      <!-- 卡片样式示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">卡片样式</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <h5 class="text-sm font-medium mb-2">默认样式</h5>
            <CommentItem :comment="comment" card-style="default" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">极简样式</h5>
            <CommentItem :comment="comment" card-style="minimal" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">提升样式</h5>
            <CommentItem :comment="comment" card-style="elevated" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">轮廓样式</h5>
            <CommentItem :comment="comment" card-style="outlined" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">扁平样式</h5>
            <CommentItem :comment="comment" card-style="flat" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">玻璃样式</h5>
            <CommentItem :comment="comment" card-style="glass" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">霓虹样式</h5>
            <CommentItem :comment="comment" card-style="neon" />
          </div>
        </div>
      </div>

      <!-- 自定义样式示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义样式</h4>
        <div class="space-y-4">
          <div>
            <h5 class="text-sm font-medium mb-2">自定义CSS变量</h5>
            <CommentItem
              :comment="comment"
              :custom-vars="{
                'primary-color': '#ff6b6b',
                'secondary-color': '#4ecdc4',
                'border-radius': '20px',
                'shadow-intensity': '0.3',
              }"
              custom-class="custom-comment"
            />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">自定义内联样式</h5>
            <CommentItem
              :comment="comment"
              :custom-style="{
                backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                borderRadius: '15px',
                boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
              }"
            />
          </div>
        </div>
      </div>

      <!-- 头像尺寸示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">头像尺寸</h4>
        <div class="space-y-4">
          <div>
            <h5 class="text-sm font-medium mb-2">超小 (xs)</h5>
            <CommentItem :comment="comment" avatar-size="xs" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">小 (sm)</h5>
            <CommentItem :comment="comment" avatar-size="sm" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">中 (md)</h5>
            <CommentItem :comment="comment" avatar-size="md" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">大 (lg)</h5>
            <CommentItem :comment="comment" avatar-size="lg" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">超大 (xl)</h5>
            <CommentItem :comment="comment" avatar-size="xl" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">巨大 (2xl)</h5>
            <CommentItem :comment="comment" avatar-size="2xl" />
          </div>
        </div>
      </div>

      <!-- 间距示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">间距设置</h4>
        <div class="space-y-4">
          <div>
            <h5 class="text-sm font-medium mb-2">紧密 (tight)</h5>
            <CommentItem :comment="comment" spacing="tight" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">正常 (normal)</h5>
            <CommentItem :comment="comment" spacing="normal" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">宽松 (loose)</h5>
            <CommentItem :comment="comment" spacing="loose" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">超大 (xl)</h5>
            <CommentItem :comment="comment" spacing="xl" />
          </div>
        </div>
      </div>

      <!-- 交互功能示例 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">交互功能</h4>
        <div class="space-y-4">
          <div>
            <h5 class="text-sm font-medium mb-2">禁用悬停效果</h5>
            <CommentItem :comment="comment" :enable-hover="false" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">禁用动画效果</h5>
            <CommentItem :comment="comment" :enable-animations="false" />
          </div>
          <div>
            <h5 class="text-sm font-medium mb-2">禁用键盘导航</h5>
            <CommentItem :comment="comment" :enable-keyboard="false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CommentItem } from '@/components/common/comment'

// 示例评论数据
const comment = {
  id: '1',
  content: '这是一个高度自定义化的评论组件示例，展示了各种样式和配置选项。',
  author: {
    id: '1',
    name: '张三',
    avatar:
      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
  },
  createdAt: '2024-01-15T10:30:00Z',
  likes: 15,
  isLiked: false,
  replyCount: 3,
}
</script>

<style scoped>
.custom-comment {
  --primary-color: #ff6b6b;
  --secondary-color: #4ecdc4;
  --border-radius: 20px;
  --shadow-intensity: 0.3;
}
</style>
